<template>
  <div class="first">
    <el-skeleton :loading="first_loading" animated :throttle="500">
        <template slot="template">
          <div style="display:flex;text-align: center;margin: 0 auto;height: 50px;">
            <el-row v-for="item,index in [1,2,3]" :key="index" style="margin: 10px 20px">
              <el-col style="padding: 15px;">
                <el-skeleton-item variant="h3" style="width: 230px;height: 30px;" />
                <div style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"></div>
              </el-col>
            </el-row>
          </div>
        </template>
        <template slot="template">
          <div style="display:flex;text-align: center;margin: 20px auto 10px auto;">
            <el-row style="width: 100vw;display: flex;">
                <el-skeleton-item variant="image" style="width: calc(87vw*0.53); height: calc(60vh - 60px);margin: 10px 20px;"/>
                <el-skeleton-item variant="image" style="width: calc(87vw*0.4); height: calc(60vh - 60px);margin: 10px;"/>
            </el-row>
          </div>
        </template>
        <template slot="template">
          <div style="display:flex;text-align: center;margin: 20px auto 10px auto;">
            <el-row style="width: 100vw;display: flex;">
                <el-skeleton-item variant="image" style="width: calc(87vw*0.47); height: calc(30vh - 60px);margin: 10px 20px;"/>
                <el-skeleton-item variant="image" style="width: calc(87vw*0.47); height: calc(30vh - 60px);margin: 10px;"/>
            </el-row>
          </div>
        </template>
    </el-skeleton>
    <div v-if="first_loading==false">
      <div class="first_static">
        <div>服务器状态：<span :style="{color:static_color}">{{web_static}}</span></div>
        <div>网站状态：<span :style="{color:static_color}">{{web_static}}</span></div>
        <div>上次检查：<span style="color: rgb(0, 182, 185);">{{lastcheck_time}}</span></div>
      </div>
      <div class="first_table1">
        <maplocal></maplocal>
        <usernumber></usernumber>
      </div>
      <div class="first_table">
        <checkweb></checkweb>
        <profittable></profittable>
      </div>
    </div>
  </div>
</template>

<script>
import checkweb from '@/components/WebCheck.vue';
import profittable from '@/components/ProfitTable.vue';
import usernumber from '@/components/UserNumber.vue';
import maplocal from '@/components/MapLocal.vue';

export default {
  data(){
    return {
      web_static:"未知",
      static_color:"green",
      lastcheck_time:"2022-11-8 11:32",
      first_loading:true,
    }
  },
  components:{
    checkweb,
    profittable,
    usernumber,
    maplocal,
  },
  mounted(){
    this.web_static="良好"
    setTimeout(()=>{
      this.first_loading=false
    },1500)
  }

}
</script>

<style lang="scss">

.first_static{
  display: flex;
  font-size: 18px;
  font-weight: bold;
  > div {
    width: 25%;
    > span {
      font-size: 25px;
    }
  }
}
.first_table1{
  display: flex;
  >div:nth-child(1){
    width: 65%;
    overflow: hidden;
  }
  >div:nth-child(2){
    width: 35%;
  }
}
.first_table {
  display: flex;
  > div{
    width: 50%;
  }
}
</style>